<template>
	<view class="content">
		<image src="../../static/image/ye-bg.png" class="ye-bg" mode=""></image>
		<view class="conBox">
			<view class="main-title">余额</view>
			<view class="top">
				<view class="left">
					<view class="text">余额（元）</view>
					<view class="price">{{userData.balance}}</view>
				</view>
				<view class="right" @click="goInfo('/pages-send/recharge/recharge')">充值</view>
			</view>
			<view class="detail">
				<view class="sub-title">
					账单明细
				</view>
				<scroll-view scroll-y="true" class="scroll">
					<view style="height: 600rpx;" v-if="list.length==0">
						<u-empty text="暂无明细" mode="list"></u-empty>
					</view>
					<view v-else>
						<view class="item" v-for="(item,index) in list">
							<view class="left">
								<view class="name">{{item.type=='pay'?'充值':'退款'}}</view>
								<view class="time">{{item.pay_at}}</view>
							</view>
							<view class="right">{{item.amount}}</view>
						</view>
					</view>
					
				</scroll-view>
			</view>
		</view>
	</view>
</template>

<script>
	import {paymentBalance,userInfo} from '../../common/api.js'
	export default {
		data() {
			return {
				list:[],
				userData:{}
			}
		},
		onLoad() {
			this.getList()
		},
		onShow() {
			userInfo({}).then(res=>{
				console.log(res)
				if(res.code==10000){
					this.userData = res.data
				}
			})
		},
		methods: {
			getList(){
				paymentBalance({paid:true}).then(res=>{
					console.log(res)
					if(res.code==10000){
						this.list = res.data.list
					}
				})
			},
			goInfo(url){
				uni.navigateTo({
					url:url
				})
			}
		}
	}
</script>

<style scoped lang="scss">
.content{
	width: 750rpx;
	height: 100vh;
	background: #161B39;
	position: relative;
	.ye-bg{
		width: 402rpx;
		height: 482rpx;
		position: absolute;
		right: 17rpx;
		top: 156rpx;
	}
	.conBox{
		width: 750rpx;
		height: 100vh;
		position: absolute;
		left: 0rpx;
		top: 0rpx;
		padding: 32rpx;
		box-sizing: border-box;
		.main-title{
			font-family: PingFangSC, PingFang SC;
			font-weight: 600;
			font-size: 36rpx;
			color: #FFFFFF;
			line-height: 120rpx;
			text-align: center;
			font-style: normal;
		}
		.top{
			width: 100%;
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 20rpx 15rpx 50rpx 40rpx;
			box-sizing: border-box;
			.left{
				.text{
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					font-size: 24rpx;
					color: rgba(255,255,255,.6);
					line-height: 33rpx;
					font-style: normal;
					text-transform: uppercase;
				}
				.price{
					font-family: DINAlternate, DINAlternate;
					font-weight: bold;
					font-size: 66rpx;
					color: #FFFFFF;
					line-height: 74rpx;
					font-style: normal;
				}
			}
			.right{
				width: 220rpx;
				height: 88rpx;
				background: #1AA261;
				border-radius: 44rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				font-size: 30rpx;
				color: #FFFFFF;
				line-height: 88rpx;
				text-align: center;
				font-style: normal;
			}
		}
		.detail{
			width: 100%;
			height: calc(100% - 304rpx);
			background: #FFFFFF;
			border-radius: 20rpx;
			padding: 40rpx;
			box-sizing: border-box;
			.sub-title{
				font-family: PingFangSC, PingFang SC;
				font-weight: 600;
				font-size: 38rpx;
				color: #333333;
				line-height: 38rpx;
				text-align: left;
				font-style: normal;
			}
			.sub-title:after{
				content: " ";
				display: block;
				width: 144rpx;
				height: 9rpx;
				background: rgba(26,162,97,0.33);
				border-radius: 5rpx;
				margin-left: 5rpx;
			}
			.scroll{
				width: 100%;
				height: calc(100% - 90rpx);
				margin-top: 10rpx;
				.item{
					display: flex;
					justify-content: space-between;
					align-items: center;
					border-bottom: 1rpx solid #EEEEEE;
					padding: 30rpx 0;
					.left{
						.name{
							font-family: PingFangSC, PingFang SC;
							font-weight: 600;
							font-size: 28rpx;
							color: #333333;
							line-height: 28rpx;
							text-align: left;
							font-style: normal;
						}
						.time{
							font-family: PingFangSC, PingFang SC;
							font-weight: 400;
							font-size: 22rpx;
							color: #999999;
							line-height: 22rpx;
							text-align: left;
							font-style: normal;
							margin-top: 16rpx;
						}
					}
					.right{
						font-family: DINAlternate, DINAlternate;
						font-weight: bold;
						font-size: 32rpx;
						color: #333333;
						line-height: 32rpx;
						text-align: right;
						font-style: normal;
					}
				}
			}
		}
	}
}

</style>
